<template xmlns:margin-top="http://www.w3.org/1999/xhtml">
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
  <div class="tableMain" style="margin-top: 20px;">
    <div class="form">
      <el-form :inline="true" :model="ruleForm1" ref="ruleForm" >
        <el-form-item label="课程名称:">
          <el-input v-model="ruleForm1.title" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="父类ID:">
          <el-input v-model="ruleForm1.parentId" placeholder="请输入父类ID"></el-input>
        </el-form-item>
        <el-form-item label="课类序号:">
          <el-input v-model="ruleForm1.sort" placeholder="请输入课类序号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search('ruleForm')">搜索</el-button>
          <el-button type="primary" @click="insertBefore1()">添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="title"
        label="名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="parentId"
        label="父类ID">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="课类序号">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="el-toolbar">
      <div class="el-toolbar-body" style="justify-content: flex-start;">
        <el-button type="text" @click="exportData"><i class="fa fa-plus"/> 导出</el-button>
        <el-button type="text" @click="importData"><i class="fa fa-plus"/> 导入</el-button>
      </div>
    </div>

    <el-dialog title="导入" :visible.sync="dialogImportVisible" width="480px">
      <el-form label-position="right" label-width="170px">
        <el-form-item label="文件">
          <el-upload
            class="upload-demo"
            multiple="multiple"
            action='http://localhost:8080/subject/importData'>
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xls文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onUploadSuccess">确定</el-button>
        <el-button @click="closeLoadSuccess">取消</el-button>
      </div>
    </el-dialog>
  </div>

    <el-dialog :title=addtitle :visible.sync="dialogFormVisible">
      <el-form :model="form"  ref="form" >
        <el-form-item label="课程名称" label-width="70px">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父类ID" label-width="70px">
          <el-input v-model="form.parentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课类序号" label-width="70px">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import subjectApi from '@/api/subject'

export default{
  data() {
    return {
      list:[],
      ruleForm1:{
        title: '',
        parentId:'',
        sort:''
      },
      form:{
        title:'',
        parentId:'',
        sort:'',
        id:''
    },
      addtitle:"编辑课程",
      dialogFormVisible: false,
      dialogImportVisible: false,
      loading: true
    }
  },
  created() {
    this.getSubList(0)
  },
  methods: {
    // 数据字典列表
    getSubList(id) {
      subjectApi.getChildList(id)
        .then(response => {
          console.log(response)
          this.list = response.data
          this.loading=false
        })
    },
    importData() {
      this.dialogImportVisible = true
    },
    onUploadSuccess(response, file) {
      this.$message.success('上传成功')
      this.dialogImportVisible = false
      this.list=[]
      this.getSubList(0)
    },
    // 导出
    exportData() {
      window.open('http://localhost:8080/subject/exportData')
    },
    // 树形结构
    load(tree, treeNode, resolve) {
      subjectApi.getChildList(tree.id).then(response => {
        resolve(response.data)
      })
    },
    closeLoadSuccess(){
      this.dialogImportVisible = false
      this.list=[]
      this.getSubList(0)
    },

    openDialog(){
      this.dialogFormVisible=true
    },
    closeDialog(){
      this.list=[]
      this.getSubList(0)
      this.dialogFormVisible=false
      this.form ={};
    },
    //编辑
    handleEdit(index, row){
      console.log(index, row)
      this.form=row;
      this.openDialog()
      this.addtitle='编辑课程'
    },

    insertBefore1(){
      this.addtitle="添加课程"
      this.openDialog();
    },
    //添加
    edit(){
      if(this.addtitle==="添加课程"){
        subjectApi.insertSubject(this.form)
      }else{
        subjectApi.editSubject(this.form)
      }
      this.closeDialog()
    },
    //删除
    handleDelete(index,row){
      this.$confirm("此操作删除当前数据，是否继续？","提示",{
        type:'info'
      }).then(()=> {
        subjectApi.deleteSubject(row.id)
        this.list = []
        this.getSubList(0)
      }).catch(()=>{
        this.$message.info("取消删除操作");
      });
    },
    search(ruleForm){
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          subjectApi.getSubjectLike("/subject?title="+this.ruleForm1.title
            +"&parentId="+this.ruleForm1.parentId
            +"&sort="+this.ruleForm1.sort).then(req => {
            if(req.data.length===0){
              this.$message.error("未查到相关数据")
            }else{
              this.list = req.data
            }
            console.log(this.list)
          })
        } else {
          this.$message.error("数据校验失败")
          return false;
        }
      });
    }
  }
}
</script>
